<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/MBase.js"></script>
</head>
<body>
<div class="ibox-content">
		
	<form class="form-horizontal" id="dataform" onsubmit="javascripr:return false;">
			<input type="hidden" name="tokenUrl" value="${tokenUrl}">	 
			<input type="hidden" name="token" value="${token}">
		<c:if test="${obj ne null }">
			<input type="hidden" name="menId" value="${obj.menId }">
		</c:if>
		<div class="form-group">
		<label class="col-sm-2 control-label">就餐人数
			<span class="text-danger">*</span>
			</label>
			<div class="col-sm-4">
			
				<input type="number" class="form-control" name="paramValue" id="paramValue"
						min="1" maxLength="20" dataType="n"
					value="<c:out value="${bus.paramValue }"></c:out>" nullmsg="就餐人数不能为空">
			</div>
		</div>
			<div class="form-group">
			<label class="col-sm-2 control-label">添加餐期
			<span class="text-danger">*</span>
			</label>
			<div class="col-sm-4">
				<select class="form-control"  dataType="*" nullmsg="餐期不能为空"  id="mesMeal"  >
						<option value="1" >早餐</option>
						<option value="2" >早点</option>
						<option value="3" >中餐</option>
						<option value="4" >午点</option>
						<option value="5" >晚餐</option>
						<option value="6" >晚点</option>
				</select>
			</div>
			<button class=" btn btn-success btn-sm" id="btn_addtr" type="button" onclick="addTr()">添加餐期</button>
		</div>
				<div class="form-group">
				<table class="table table-hover" id="mgrid" >
					<tbody id="show">
			 			<tr id="no1">
			   				 <td align="center">餐期</td>
			    			 <td align="center" >菜谱类别</td>
			    			 <td align="center" >数量</td>
			    			 <td align="center" >操作</td>
			   			</tr>
			   			<c:forEach var='mes' items="${mesList }" varStatus="s">
			   				<tr align="center"  
			   				<c:if test="${mes.mesMeal eq '早餐' }">id="1"</c:if>
			   				<c:if test="${mes.mesMeal eq '早点' }">id="2"</c:if>
			   				<c:if test="${mes.mesMeal eq '中餐' }">id="3"</c:if>
			   				<c:if test="${mes.mesMeal eq '午点' }">id="4"</c:if>
			   				<c:if test="${mes.mesMeal eq '晚餐' }">id="5"</c:if>
			   				<c:if test="${mes.mesMeal eq '晚点' }">id="6"</c:if>
			   				>
			    			 	<td align="center" >
			    			 	<input type="hidden"  value="${mes.mesMeuId }" class="mesMeuIdHidden">
									<input type="hidden" name="pcMeals[${s.index }].mesMeal" value="${mes.mesMeal }" class="mesMeal">
									<span >${mes.mesMeal }</span>
								</td>
			 				<td align="center" style="width:300px;">
								<select class="select2 form-control  mesMeuId" size="1" name="pcMeals[${s.index }].mesMeuId" 
										id="mesMeuId${s.index }" >
								</select>
							</td>
			    			 <td align="center" >
			    				<input type="number" class="form-control amount" name="pcMeals[${s.index }].mesAmount" 
								min="1"	max="50" dataType="n1-2" 
								value="${mes.mesAmount }" nullmsg="数量不能为空" style="width:100px;">
			    			 </td>
			    			 <td align="center">
				           	 	<button onclick="deleTr(this)" class=" btn btn-success btn-sm" id="btn_del" 
				           	 		type="button" >删除</button>
							 </td>
 							</tr>
			   			</c:forEach>
		 			</tbody>
		 		 </table>
			</div>
			
		<div class="form-group ">
			<div class="col-sm-12 text-center">
				<a href="javascript:;" onclick="myForm.submit()"
					class="btn btn-success radius"><i class="fa fa-check"></i>  保存</a>&nbsp;&nbsp;&nbsp;&nbsp; <!-- <a
					class="btn btn-danger radius" href="javascript:window.close()"><i class="fa fa-close"></i> </a> -->
			</div>
		</div>
	</form>
	</div>

<script type="template" id="template">
			<tr id="mesMeal">
    			 <td align="center" >
						<input type="hidden" name="mealName" value="cqName" class="mesMeal">
						<span >cqName</span>
				</td>
 				<td  align="center" style="width:300px;">
					<select class="select2 form-control  mesMeuId" size="1" name="menTypeName" 
					id="menTypeId"></select>
				</td>
    			 <td align="center" >
    				<input type="number" class="form-control amount" name="mesAmount" 
					min="1"	max="50" dataType="n1-2" 
					value="1" nullmsg="数量不能为空" style="width:100px;">
							<span class="Validform_checktip"></span>
    			 </td>
    			 <td align="center">
	           	 	<button onclick="deleTr(this)" class=" btn btn-success btn-sm" id="btn_del" 
	           	 		type="button" >删除</button>
				 </td>
 			</tr>
</script>
<script type="text/javascript" src="${path }/resource/js/systools/MJsBase.js"></script>
<script type="text/javascript">
		var index=parseInt($("tr").length)-1;
		//MTools.autoFullSelect();
		SortTb();
		var myForm=MForm.initForm({
			invokeUrl:"${path}/admin/pcMealSettings/addOrModify",
			beforeSubmit:function(){
				var tb = $("#show").find("tr");
		       var arr=new Array();
		        for (var i = 0; i <tb.length; i++) {
		        	if(parseInt($(tb).eq(i).find(".amount").val())<1){
		        		layer.msg("数量不能为0", {
							icon : 2,time:1000
						});
		        		return false;
		        	}
		        	if(parseInt($(tb).eq(i).find(".mesMeuId").val())==0){
		        		layer.msg("请选择菜谱类别", {
							icon : 2,time:1000
						});
		        		return false;
		        	}
		        	arr[i]=$(tb).eq(i).find(".mesMeal").val()+$(tb).eq(i).find(".mesMeuId").val();
		        }
				for(var i =0 ; i<arr.length ; i++){
					for(var j =i+1 ; j<arr.length ; j++){
						if(arr[i]==arr[j]){
							layer.msg("同一餐期菜谱类别不能重复", {
								icon : 2,time:1000
							});
							return false;
						}
					}
				}
				
				
			}
		});
		//添加表单tr
		function addTr(){
			var str=$("#template").html().replace(/cqName/g,$("#mesMeal option:selected").text())
			.replace('mesMeal',$("#mesMeal").val())
			.replace('mealName','pcMeals['+index+'].mesMeal')
			.replace('menTypeName','pcMeals['+index+'].mesMeuId')
			.replace('mesAmount','pcMeals['+index+'].mesAmount')
			.replace('menTypeId','menTypeId'+index);
			//console.log(str);
			if(index==0){
				$("#show").append(str);
			}else{
				var _this;
				$("#show").find("tr").each(
						function(){
							var f2 = parseFloat($(this).attr("id"));
							if($(this).attr("id")==$("#mesMeal").val()){
								 _this=$(this);
							}
						}
				);
				
				if(_this==null){
					$("#show").append(str);
				}else{
					_this.after(str);
				}
			}
			//MTools.autoFullSelect("#menTypeId"+index); 
			initFunctionList("#menTypeId"+index,"")
			$("#menTypeId"+index).select2({width:"100%"});
			index++;
			SortTb() ;
		};	
		
		//删除表格
		function deleTr(node){
			$(node).closest("tr").remove();
		};	
		//tr交换位置
		function swapRow(i,k){
			var tb = $("#show").find("tr");
	        $(tb).eq(k).insertBefore($(tb).eq(i));
	        $(tb).eq(i).insertAfter($(tb).eq(k));
		};
		//表格排序
		function SortTb() {          
	        var tb = $("#show").find("tr");
	        var total = tb.length;
	        //外层循环，共要进行arr.length次求最大值操作
	        for (var i = 0; i < total; i++) 
	        {
	            //内层循环，找到第i大的元素，并将其和第i个元素交换
	            for (var j = i; j < total; j++) 
	            {
	                var v = parseFloat($(tb).eq(i).attr("id"));
	                var v2 = parseFloat($(tb).eq(j).attr("id"));
	                if (v>0 && v2 >0 && v > v2) 
	                {
	                    //交换两个元素的位置
	                    swapRow(i, j);
	                    tb = $("#show").find("tr");
	                }
	            }
	        }
	        tb = $("#show").find("tr");
	        total = tb.length;
	        for (var i = 1; i < total; i++) {
	        	 $(tb).eq(i).find(".mesMeal").attr('name','pcMeals['+i+'].mesMeal');
	        	$(tb).eq(i).find(".mesMeuId").attr('name','pcMeals['+i+'].mesMeuId');
	        	$(tb).eq(i).find(".amount").attr('name','pcMeals['+i+'].mesAmount'); 
	        }
	    };
	    
		$(function() {	
			var n=0;
			$(".mesMeuIdHidden").each(
		    		function(){
		    			initFunctionList("#mesMeuId"+n,$(this).val());
		    			$("#mesMeuId"+n).select2({width:"100%"});
		    			n++;
		    		});
		});
	  
	    
	    /**
		 * 初始菜谱分类列表
		 */
		function initFunctionList(id,value) {
			$.AjaxProxy().invoke("${path}/admin/pcMenuCategory/all",
					function(loj) {
			    			$(id).createSelectTree(
									loj.attr("result").rows,
									{	id : "meuId",		// 选项的值
										parent : "meuParentId",	// 父节点值
										value : "meuName",	// 要显示的名称
										append : false,
										defaultValue : value,
										defaultHtml : '<option value="0" selected="selected">请选择菜谱类别</option>'
									});
					});	
		}
		
		
</script>
</body>
</html>